<template>
    <div>
<h2>食谱列表</h2>
菜谱：<input type="text" v-model="TiaoJian.name">
分类：
    <select v-model="TiaoJian.type">
        <option value="早餐">早餐</option>
        <option value="午餐">午餐</option>
        <option value="晚餐">晚餐</option>
    </select>

    <input type="button" value="查询" @click="CHaXun()">
<table class="table">
    <thead>
        <tr>
            <td>id</td>
            <td>菜谱标题</td>
            <td>分类</td>
            <td>分享</td>
            <td>收藏</td>
            <td>时间</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="m in data">
            <td>{{ m.id }}</td>
            <td>{{ m.name }}</td>
            <td>{{ m.type }}</td>
            <td>{{ m.num }}</td>
            <td>{{ m.likeNum }}</td>
            <td>{{ m.createTime.substring(0,10) }}</td>
            <td>{{ m.zhuangTai==1?"正常":"异常" }}</td>
            <td>操作</td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';

onMounted(()=>{
    GetFood();
})

const data=ref([{
    "id": 0,
    "name": "",
    "type": "",
    "num": 0,
    "likeNum": 0,
    "createTime": "",
    "zhuangTai": 1,
    "img": ""
}])

const CHaXun=()=>{
    GetFood();
}

const TiaoJian=ref({
    name:"",
    type:""
})

const GetFood=()=>{
    axios.get("https://localhost:7182/api/Food/GetFood",{params:TiaoJian.value}).then(res=>{
        data.value=res.data;
    })
}
</script>

<style scoped>

</style>